<template>
	<div class="table" v-if="tableData">
		<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">

			<template v-for="(item,index) in tabelHeader">
				<el-table-column v-if="item.type == 'selection'" type="selection" width="55"> </el-table-column>
				<el-table-column :prop="item.key" :label="item.value" v-if="item.type == 'text'" :width="item.width">
					<template slot-scope="scope">
						<div class="tb-text">
							<img class="voice-pic" :class="{cur:!!scope.row[item.juckKey]}" v-if="!!scope.row[item.juckKey]" :src="item.icon"
							 :style="{width:item.iconSize}" @click="textIconClick(item,scope.row)">
							<!--@click="openVoice(item.key,scope.row)"-->
							<span class="table-txt">{{ scope.row[item.key] }}</span>
						</div>
					</template>
				</el-table-column>
				<!-- 加筛选 -->
				<!-- 	<el-table-column :prop="item.key" :label="item.value" v-if="item.type == 'filters'" :width="item.width" :filters="item.filters"
				 :filter-method="filterTag" filter-placement="bottom-end">
					<template slot-scope="scope">
						<div class="tb-text">
							<img class="voice-pic" :class="{cur:!!scope.row[item.juckKey]}" v-if="!!scope.row[item.juckKey]" :src="item.icon"
							 :style="{width:item.iconSize}" @click="textIconClick(item,scope.row)">
							<span class="table-txt">{{ scope.row[item.key] }}</span>
						</div>
					</template>
				</el-table-column> -->
				<el-table-column :prop="item.key" :label="item.value" v-if="item.type == 'image'">
					<template slot-scope="scope">
						<div class="advert-picBox">
							<img v-if="!!scope.row[item.key]" class="advert-pic" :src="scope.row[item.key]" :style="{width:item.iconSize}">
						</div>
						<!-- <viewer class="advert-picBox">
							<img v-if="!!scope.row[item.key]" class="advert-pic" :src="scope.row[item.key]" :style="{width:item.iconSize}">
						</viewer> -->
					<!-- 	<vue-viewer style="display: inline-block" :thumb="image" :full="image">
							<img v-if="!!scope.row[item.key]" class="advert-pic" :src="scope.row[item.key]" :style="{width:item.iconSize}">
						</vue-viewer> -->
					
					</template>
				</el-table-column>
				<el-table-column :prop="item.key" v-if="item.type == 'button'" :label="item.value" :width="item.width">
					<template slot-scope="scope">
						<div v-if="item.btnLis.length>0">
							<!--:type="items.btntype"-->
							<el-button v-for="(items,indexs) in item.btnLis" :key="indexs" type="text" size="small" v-if="scope.row[items.judeKey] == items.judeValue"
							 :disabled="!!items.disabled" @click="tableCellClick(items.type,scope.row)">{{items.name}}
							</el-button>
						</div>
					</template>
				</el-table-column>
				<el-table-column :prop="item.key" v-if="item.type == 'status'" :label="item.value" class="table-title">
					<template slot-scope="scope">
						<div class="tb-text">
							<img class="voice-pic" v-if="!!checkIdInArr(scope.row[item.judeKey],item.status.data).icon" :src="checkIdInArr(scope.row[item.judeKey],item.status.data).icon"
							 :style="{width:checkIdInArr(scope.row[item.judeKey],item.status.data).iconSize}">
							<span v-if="checkIdInArr(scope.row[item.judeKey],item.status.data)" :style="{ color: checkIdInArr(scope.row[item.judeKey],item.status.data).statuscolor }">{{ checkIdInArr(scope.row[item.judeKey],item.status.data).statusname }}</span>
							<span v-else :style="{ color: item.status.defulColor }">{{ scope.row[item.status.defulKeyName] }}</span>
						</div>
					</template>
				</el-table-column>


			</template>
		</el-table>
	</div>
</template>

<script>
	export default {
		props: {
			// 表头
			tabelHeader: {
				type: Array,
				default: []
			},
			//表格数据
			tableData: {
				type: Array,
				default: []
			},

		},

		data() {
			return {}
		},

		methods: {
			// filterTag(value, row) {
			// 	console.log(value)
			// 	console.log(row)
			// 	return row.tag === value;
			// },

			// filterHandler(value, row, column) {
			// 	const property = column['property'];
			// 	return row[property] === value;
			// },
			handleSelectionChange(type) {
				// console.log(type)
				this.$emit("tableCellClick", type);
			},
			//操作
			tableCellClick(type, data) {
				let obj = {
					type: type,
					data: data
				}
				this.$emit("tableCellClick", obj);
			},
			textIconClick(item, data) {

				if (!!item.juckKey) {
					let obj = {
						type: item.key,
						data: data
					}
					this.$emit("tableCellClick", obj);
				}

			},
			checkIdInArr(id, arr) {
				let str = false
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].statusid == id) {
						str = arr[i]
						break
					}
				}
				return str
			},

		},

		mounted() {
			//console.log(this.tableData)
		}
	}
</script>

<style scoped>
	.tb-text {
		display: flex;
		align-items: center;
	}

	.advert-picBox {}

	.advert-pic {
		width: 100%;
	}

	.voice-pic {
		margin-right: 5px;
	}

	.cur {
		cursor: pointer;
	}
</style>
